<template>
  <el-dialog :title="title" :visible.sync="oper.dcsBindShow" @open="dialogOpened"  @close="dialogClose" width="60%" v-loading.fullscreen.lock="tableLoading">
    <div style="margin-bottom: 10px;"></div>
    <el-form ref="dataForm" :model="temp">
      <el-form-item label="分组ID" prop="gid">
        <el-input v-model="temp.gid" disabled/>
      </el-form-item>
      <el-form-item label="分组名称" prop="name">
        <el-input v-model="temp.name" disabled/>
      </el-form-item>
      <el-form-item label="标准数据标签" prop="tag_arr">
        <el-transfer filterable
                     :titles="['可选列表','已选列表']"
                     :filter-method="filterMethod"
                     filter-placeholder="请输入关键字"
                     :props="transferOps"
                     v-model="temp.tag_arr"
                     :data="dcsFields" />

      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="fieldCancel">取消</el-button>
      <el-button type="primary"  @click="fieldEditSave">保存</el-button>
    </div>
  </el-dialog>
</template>

<script>
  import {resetTemp} from '@/utils'
  import tagApi from "@/api/tag";
  import debounce from 'lodash/debounce'
  import { pageParamNames, confirm } from '@/utils/constants'

  export default {
    name: 'bindComp',
    props:{
      oper:{
        type: Object,
        required:true
      }
    },
    data(){
      return {
        rules:{
          tag_arr:[
            {type:'array', required: true, message: '请选择标签', trigger: 'change'}
          ]
        },
        title:'DCS分组绑定',
        tableLoading:false,
        transferOps:{
          key:'id',
          label:'cn_name'
        },
        dcsFields:[],
        temp:{
          idx:null,
          id:null,
          name:null,
          gid:null,
          dcs_standard_ids:null,
          tag_arr:[]
        }
      }
    },
    methods:{
      async dialogOpened(){
        this.temp.gid=this.oper.groupId
        this.temp.name=this.oper.groupName
        const rqParams={
          group_id:this.oper.groupId,
          filter:'1'
        }
        tagApi.dcsStandardList(rqParams).then(res=>{
          this.dcsFields = res.data
        })
        const relatedData = await tagApi.getDcsRelation(this.temp.gid)
        this.temp.tag_arr = relatedData.data.dcs_standard.map(sm=>sm.id)

      },
      dialogClose(){
        resetTemp(this.temp)
        this.temp.tag_arr=[]
      },
      fieldEditSave(){
        this.temp.dcs_standard_ids = this.temp.tag_arr.join(',')
        this.temp.id=this.temp.gid
        tagApi.bindDcsGroup(this.temp).then(res=>{
          this.$message.success("绑定成功")
          this.oper.dcsBindShow=false
        })
      },
      fieldCancel(){
        this.$message.info("取消绑定")
        resetTemp(this.temp)
        this.temp.tag_arr=[]
        this.oper.dcsBindShow=false
      },
      filterMethod(query, item) {
        return item.cn_name.indexOf(query) > -1;
      },
    }
  }
</script>

<style scoped>
  .field-oper{
    text-decoration: underline;
    display: inline-block;
    padding: 5px;
    cursor: pointer;
  }
  .field-del{
    color: red;
  }
</style>
